﻿<Menu Mode="MenuMode.Inline"
      OpenKeys=this.openKeys
      OnOpenChange=this.onOpenChange
      Style="width:256px ;">
    <SubMenu Key="sub1" TitleTemplate=@sub1Title>
        <MenuItem Key="1">Option 1</MenuItem>
        <MenuItem Key="2">Option 2</MenuItem>
        <MenuItem Key="3">Option 3</MenuItem>
        <MenuItem Key="4">Option 4</MenuItem>
    </SubMenu>
    <SubMenu Key="sub2" TitleTemplate=@sub2Title>
        <MenuItem Key="5">Option 5</MenuItem>
        <MenuItem Key="6">Option 6</MenuItem>
        <SubMenu Key="sub3" Title="Submenu">
            <MenuItem Key="7">Option 7</MenuItem>
            <MenuItem Key="8">Option 8</MenuItem>
        </SubMenu>
    </SubMenu>
    <SubMenu Key="sub4" TitleTemplate=@sub4Title>
        <MenuItem Key="9">Option 9</MenuItem>
        <MenuItem Key="10">Option 10</MenuItem>
        <MenuItem Key="11">Option 11</MenuItem>
        <MenuItem Key="12">Option 12</MenuItem>
    </SubMenu>
</Menu>

@code {
    RenderFragment sub1Title =
        @<span>
        <Icon Type="@IconType.Outline.Mail" />
            <span>Navigation One</span>
        </span>;

    RenderFragment sub2Title =
        @<span>
            <Icon Type="@IconType.Outline.Appstore" />
            <span>Navigation Two</span>
        </span>;

    RenderFragment sub4Title =
        @<span>
            <Icon Type="@IconType.Outline.Setting" />
            <span>Navigation Three</span>
        </span>;

    // submenu keys of first level
    string[] rootSubmenuKeys = {"sub1", "sub2", "sub4"};

    string[] openKeys = {"sub1"};

    void onOpenChange(string[] openKeys)
    {
        var latestOpenKey = openKeys.FirstOrDefault(key => !this.openKeys.Contains(key));
        if (!rootSubmenuKeys.Contains(latestOpenKey))
        {
            this.openKeys = openKeys;
        }
        else
        {
            this.openKeys = !string.IsNullOrEmpty(latestOpenKey) ? new[] {latestOpenKey} : Array.Empty<string>();
        }
    }
}
